<template>
  <div class="justify-around flex flex-wrap">
    <div v-for="item in videoData" :key="item.video_id">
      <video-card :id="item.video_id" :cover="item.video_cover" :title="item.video_title" :creator="item.user.name"></video-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onBeforeMount, reactive} from "vue";
import {getVideoData} from "@/api/video";
import {useRouter} from "vue-router";

const router = useRouter()
const videoData = reactive([]);

onBeforeMount(async ()=>{
  let result = await getVideoData();
  for (const item of result.data) {
    item.video_file = "http://localhost:3000/" + item.video_file.split("\\").slice(-2).join("/")
    item.video_cover = "http://localhost:3000/" + item.video_cover.split("\\").slice(-2).join("/")
    videoData.push(item)
  }
  result = null
})

</script>

<style scoped>

</style>
